<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>D3测试</title>
    <script type="text/javascript" src="d3.js"></script>
    <script type="text/javascript" src="message.js"></script>
    <style type="text/css">
        div.bar {
            display: inline-block;
            width: 20px;
            margin-right: 2px;
            background-color: teal;
        }
        .MyText {
            fill: white;
            text-anchor: middle;
        }
        .bar{
            fill:blue;
            stroke-width:2;
            stroke:lightgreen;
        }
        .changedbar{
            fill:yellow;
            stroke-width:2;
            stroke:lightgreen;
        }
    </style>
</head>
<body>
<form>
    服务器地址：
    <input type="plaintext" id="addr" value="192.168.159.134" />
    端口号：
    <input type="plaintext" id="port" value="13999" />

    <br />

    输入消息：
    <input type="plaintext" id="input" value="Hello,World!" />
    <br />

    输出消息：
    <input type="plaintext" id="echo" />
    <br />
    <button type="button" onclick="mywebsockinit()" id="connect">连接服务器</button>
    <button type="button" onclick="myFunction()" id="sendmsg">发送消息</button>
    <button type="button" onclick="exchange()" id="exchange">交换数据</button>

</form>

<script type="text/javascript">
    var isconnected = false;
    var input = document.getElementById("input");
    var echo = document.getElementById("echo");
    var wsock;

    
    var plainmsg = {"head":"","record":"","expand":""};
    plainmsg["head"]={"type":"MESG","version":65537};
    var jsonstr = JSON.stringify(plainmsg);

    function mywebsockinit() {
        if (isconnected) {
            alert("已连接服务器！")
            return;
        }
        var netaddr=document.getElementById("addr");
        var netport=document.getElementById("port");
        var b=new sort_show();
        wsock = new WebSocket('ws://'+netaddr.value+':'+netport.value+'/', );

        wsock.onopen = function (e) {
            if (!isconnected) {
                isconnected = true;
                alert("连接成功！")
            }
            return;
        };
        wsock.onclose = function (e) {
        };
        wsock.onerror = function (e) {
        };
        wsock.onmessage = function (e) {
            var msg;
            msg = JSON.parse(e.data);

            if (msg.RECORD[0].type=="INIT") {
                dataset=msg.RECORD;
             //   render();

                 b.paint(dataset);
            }
            else if(msg.RECORD[0].type == "SWAP"){
                 b.exchange(msg.RECORD[0].index);
            }
//            else if(msg.RECORD[0].type == "KEEP"){
//               b.keep(msg.RECORD[0].index);
 //           }
                      
        }
    }

    function myFunction() {
        if(!isconnected)
        {
            alert("连接未建立！")
            return;
        }

        var message = {size:10,name:"bubble",interval:50};
        var msg = new Cube_msg("VISUAL_SORT","VISUAL_REQ");
        msg.addrecord(message);
        alert(msg.output());
        wsock.send(msg.output());
    };

    var dataset = [];
    function sort_show(){
        var  _svg;
        var  _dataset=[];
        var  H=1000;
        var  W=1000;
        var  width=20;
        var  height=100;
        function dealData(dataset){
            for(var i=0;i<dataset.length;i++){
                _dataset.push(dataset[i].value);
            }
            console.log(_dataset);
        }

        function renderSvg(){
                _svg=d3.select("body").append("svg").attr("class","plane")
                                     .attr("x",50).attr("y",200)
                                     .attr("height",H)
                                     .attr("width",W);
        }
        function render(dataset){
                dealData(dataset);
                renderSvg();
                _svg.selectAll("rect").data(_dataset).enter().append("rect")
                    .attr("class","bar")
                    .attr("x",function(d,i){return i*width;})
                    .attr("y",function(d){return 300-d;})
                    .attr("width",width)
                    .attr("height",function(d){return d;});

        }
        function _exchange(index){
                var temp=_dataset[index+1];
                _dataset[index+1]=_dataset[index];
                _dataset[index]=temp;
                var temp1=_svg.selectAll("rect").data(_dataset).filter(function(d,i){return (i==index)||(i==index+1);});

                temp1.transition()
                    .style("fill","yellow")
                    .transition()
                        .attr("y",function(d){return 300-d;})
                        .attr("height",function(d){return d;})
                    .transition()
                        .style("fill","blue");
        }
        function _keep(index){
                var temp1=_svg.selectAll("rect").data(_dataset).filter(function(d,i){return (i==index)||(i==index+1);});

                temp1.transition()
                    .style("fill","pink")
                    .transition().duration(400)
                        .style("fill","blue");
        }
        return {
            paint:render,
            exchange:_exchange,
            keep:_keep
        }
    }

</script>

</body>
</html>